<template>
  <div class="app-container">
    <!-- 新闻列表 -->
    <!--查询表单-->
    <el-form :inline="true"
             class="demo-form-inline">
      <el-form-item>
        <el-input v-model="newsQuery.news_idORtitle"
                  placeholder="新闻编号或标题" />
      </el-form-item>
      <!-- <el-form-item>
        <el-input v-model="newsQuery.title"
                  placeholder="新闻标题" />
      </el-form-item> -->
      <el-form-item label="添加时间">
        <el-date-picker v-model="newsQuery.begin"
                        type="datetime"
                        placeholder="选择开始时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00" />
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="newsQuery.end"
                        type="datetime"
                        placeholder="选择截止时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00" />
      </el-form-item>
      <el-button type="primary"
                 icon="el-icon-search"
                 @click="getList()">查询</el-button>
      <el-button type="primary"
                 icon="el-icon-download"
                 @click="loadData()">导出</el-button>
      <el-button type="default"
                 icon="el-icon-refresh-left"
                 @click="resetData()">重置</el-button>
    </el-form>
    <!-- 表格 -->
    <el-table :data="list"
              border
              fit
              highlight-current-row>
      <el-table-column label="序号"
                       width="100"
                       align="center">
        <template slot-scope="scope">
          {{ (newsQuery.page - 1) * newsQuery.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name"
                       label="新闻id"
                       width="100">
        <template slot-scope="scope">
          {{ scope.row.news_id }}
        </template>
      </el-table-column>
      <el-table-column prop="name"
                       label="新闻标题">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="发布人"
                       width="150">
        <template slot-scope="scope">
          {{ scope.row.writer }}
        </template>
      </el-table-column>
      <el-table-column prop="intro"
                       label="发布时间"
                       width="200">
        <template slot-scope="scope">
          <!-- {{ utils.getdate(scope.row.publish_time) }} -->
          {{ scope.row.publish_time }}

        </template>
      </el-table-column>
      <el-table-column prop="sort"
                       label="操作时间"
                       width="200">
        <template slot-scope="scope">
          {{ scope.row.update_time == null ? '-' : scope.row.update_time }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="300"
                       align="center">
        <template slot-scope="scope">
          <router-link :to="'/news/edit/'+scope.row.news_id">
            <el-button type="primary"
                       size="mini"
                       icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger"
                     size="mini"
                     icon="el-icon-delete"
                     style="margin-left:10px"
                     @click="removeDataById(scope.row.news_id)">删除</el-button>
          <!-- <router-link :to="'/news/create'">
            <el-button type="primary"
                       size="mini"
                       icon="el-icon-edit">测试</el-button>
          </router-link> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination :current-page="newsQuery.page"
                   :page-size="newsQuery.pageSize"
                   :total="total"
                   style="padding: 30px 0; text-align: center;"
                   layout="total, prev, pager, next, jumper"
                   @current-change="nextList" />
  </div>
</template>

<script>
// 引入调用teacher.js文件
import newsApi from '@/api/news'
export default {
  data () {
    return {

      list: null, // 查询之后接口返回集合
      total: 0, // 总记录数
      newsQuery: {
        news_idORtitle: '',
        begin: '',
        end: '',
        page: 1, // 当前页
        pageSize: 10 // 每页记录数
      },
      publish_date: ''
    }
  },
  created () { // 页面渲染之前执行，一般调用methods定义的方法
    // 调用
    this.getList()
  },
  methods: {
    // 讲师列表的方法
    getList () {
      // if (this.newsQuery.begin && this.newsQuery.end) {
      //   this.newsQuery.begin = this.utils.gettime(this.newsQuery.begin)
      //   this.newsQuery.end = this.utils.gettime(this.newsQuery.end)
      // }
      newsApi.getNewsListPage(this.newsQuery)
        .then(response => { // 请求成功
          // response接口返回的数据
          console.log(response)
          this.list = response.data
          this.total = response.total
          // console.log(this.list)
          // console.log(this.total)
        })
    },
    // 删除讲师的方法
    removeDataById (id) {
      this.$confirm('此操作将永久删除新闻记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 点击确定，执行then方法
        newsApi.deleteNewId(id)
          .then(response => { // 删除成功
            this.$message({
              type: 'success',
              message: `新闻：${id},删除成功!`
            })
            this.getList()
          })
      }) // 点击取消，执行catch方法
    },
    // 重置
    resetData () {
      this.newsQuery = {
        news_idORtitle: '',
        begin: '',
        end: '',
        page: 1, // 当前页
        pageSize: 10 // 每页记录数
      }
      this.getList()
    },
    // 导出
    loadData () {
      // this.$router.push('/excel')
      this.export2Excel()
    },
    // 下一页
    nextList (value) {
      // console.log(value)
      this.newsQuery.page = value
      this.getList()
    },
    export2Excel () {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel')
        const tHeader = [
          '新闻id', '新闻标题', '发布者', '发布时间', '操作时间'
        ]
        const filterVal = [
          'news_id',
          'title',
          'writer',
          'publish_time',
          'update_time'
        ]
        const table = this.list
        // for (let index = 0; index < table.length; index++) {
        //   table[index].publish_time = this.utils.getdate(table[index].publish_time)
        // }
        const data = this.formatJson(filterVal, table)
        export_json_to_excel(tHeader, data, '新闻列表数据')
      })
    },
    /**
       * 自定义转换导出数据格式
       */
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(item => {
        if (item === 'vs') {
          return v['kill'] + '-' + v['death'] + '-' + v['assist']
        } else {
          return v[item]
        }
      }))
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

